<template>
    <el-card>
      <!-- 图标 -->
      <div class="det"><i class="el-icon-s-promotion"></i>地产详情</div>
      <!-- 地产详情表单 -->
      <div class="box">
        <!-- 左边 -->
        <div class="left">
          <div>{{formData.title}}</div>
          <div>
            <img :src="formData.image" class="proImg" >
          </div>
        </div>
        <!-- 右边 经纪人介绍-->
        <div class="right">
           <!-- 左边 照片 -->
           <div class="imgBox">
              <img :src="ageFormData.image" class="ageImg">
            </div>
            <!-- 右边 介绍 -->
            <div class="ageRight">
              <p>姓名:{{ageFormData.name}}</p>
              <p>手机号:{{ageFormData.phone}} </p>
              <p>邮箱地址：{{ageFormData.email}}</p>
              <p>介绍：{{ageFormData.desc}}</p>
              <p>联系地址:{{ageFormData.address}}</p>
            </div>

        </div>

      </div>
       <!-- 房产介绍 -->
       <div class="proDes">
            <p>房产介绍：{{formData.desc}}</p>
            <p>房产地址：{{formData.address}}</p>
          </div>
    </el-card>
</template>

<script>
import { getDetailsById } from '@/api/detail'
export default {
  name: 'ProjectFrontIndex',

  data () {
    return {
      formData: {
        title: '',
        image: '',
        desc: '',
        address: ''
      },
      ageFormData: {
        image: '',
        name: '',
        phone: '',
        email: '',
        desc: '',
        address: ''
      }
    }
  },

  mounted () {

  },
  async created () {
    console.log(55, this.$route.params)
    const res = await getDetailsById(this.$route.params.id)
    this.formData = res.data
    this.ageFormData = res.data.agent
    console.log(72, this.formData)
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.el-card{
  width: 1200px;
  margin: 50px auto;

  .det{
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    border-bottom: 1px solid #333;
    margin-bottom: 10px;
  }
  .box{
    display: flex;
    justify-content: space-between;
    width: 100%;

    .left{
      flex: 1;
      font-size: 20px;
      font-weight: 700;
      .proImg{
        width: 500px;
      }
    }

    .right{
      flex: 1;
      display: flex;
      font-size: 20px;
      padding-top: 10px;
      .imgBox{
        flex: 1;

          .ageImg{
            width: 150px;
            height: 150px;
          }

      }
      .ageRight{
        flex: 2;
        font-size: 20px;
      }
    }
  }
  .proDes{
    p{
      height: 30px;
      font-size: 20px;
      line-height: 20px;
      margin-top: 20px;
    }
  }
}
</style>
